<template>
    <div class="index-forecast">
      <div>
        <div>
      <p>
        <span>{{ location.name }}</span> 天气指数预报
      </p>
    </div>
      </div>
      <div class="ccc">
          <ul class="content" ref="content">
                <li v-for="(item, index) in now" :key="index" @click="selectItem(item)">
                    <div class="cover">
                        预报日期: {{item.date}}<br>
                        {{item.name}}:{{item.level}}<br>
                        {{item.category}}<br>
                        {{item.text}}<br>
                    </div>
                </li>
            </ul>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  
  // 引入常量
  import { KEY, API_Index } from '@/common/constrant';
  
  // 引入图表
  import { mapState } from 'vuex';
  
  import dayjs from 'dayjs';
  import "qweather-icons/font/qweather-icons.css"
  export default {
    
  
    data() {
      return{
        now:[],
          
      }
    },
    // 计算属性
    computed:{
      // location:function(){
      //   return this.$store.state.location
      // }
  
      ...mapState([
        "location"
      ]),
      timeFormat:function(){
      return dayjs(this.now.obsTime).format("YYYY年/MM月/DD日 HH时:mm分:ss")
    },
      dateFormat:function(){
      return dayjs(this.dateTime).format("YYYY年/MM月/DD日 HH时:mm分")
    },
    iconName:function(){
      return "qi-"+ this.now.icon
    },
    },
    created(){
  
    },
    
    methods: {
      //获取api数据
      getData() {
        axios.get(API_Index, {
          params: {
            location: this.location.id,
            key: KEY,
            type:0
          }
        }).then((res) => {
          console.log(res.data);   
          this.now= res.data.daily
  
        });   
          
      },
      
    },
  
    //加载完所有组件调用
    mounted() {
      this.getData()
    },
    //监听，侦听器
    watch:{
      location:function(){
        
        //监听到location的值变化重新调用getData()
        this.getData()
      }
    }
  }
  </script>
  <style scoped>
  .ccc{
    width: 70%;
    margin: auto;
    border-radius: 20px;
    background-color: #DEE7FA;
  }
  ul.content > li {
    width: 15%;
    border-color:aqua;
    display: inline-block;
    vertical-align: top;
    line-height: 2rem;
  }
  ul.content li{
    border-radius: 20px;
    margin: 1rem 2rem ;
    padding: 1rem;
    background-color: #D6DFF1;
  }
  div>p>span{
    color: red;
  }
  </style>